<template>
    <div class="typeThr">
        <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />

        <van-tabs :class="index == i?'active':''" @click="changeList">
            <van-tab v-for="(item,index) in typeList.brotherCategory" :title="item.name" :key="index" 
            class="detail"
            >   
                <div class="d_top">
                    <span>{{item.name}}</span>
                    <p>{{item.desc}}</p>
                </div>
                
                <ul >
                    <li v-for="(item,index) in gdList" :key="index" @click="goDetail(item.id)">
                        <div class="img">
                            <img :src="item.picUrl" alt="">
                        </div>
                        <div class="p">
                            <p>{{item.name}}</p>
                            <p>{{item.brief}}</p>
                            <div class="price">
                                <p class="red">￥{{item.retailPrice}}</p>
                                <p class="dl"><del>￥{{item.counterPrice}}</del></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { goodsCat , gList } from '../../assets/api/typeapi.js'
export default {
    data(){
        return{
            typeList:[],
            i:this.$route.query.index,
            gdList:[],
            categoryId:this.category_id,
        }
    },
    mounted(){

    },
    created(){
        this.getType()
        this.getList()
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        getType(){
            goodsCat(this.$route.query.category_pid).then(r=>{
                console.log(r.data.data)
                this.typeList = r.data.data
            })
            
        },
        getList(){
            gList(this.$route.query.category_id,1,10).then(r=>{
                // console.log(r.data.data)
                this.gdList = r.data.data.list
            })
        },
        changeList(index){
            this.categoryId = this.typeList.brotherCategory[index].id
            this.$router.replace({
                query:{
                    id1:this.categoryId
                }
            })
            gList(this.categoryId,1,10).then(r=>{
                console.log(r.data.data)
                this.gdList = r.data.data.list
            })
        },
        
        goDetail(id){
            this.$router.push({
                name:"detail",
                query:{
                id:id
                }
            })
        }
    },
    mounted(){
        // i = this.index
        // console.log(this.$route.query.category_pid)
    }
}
</script>

<style lang="scss" scoped>
.typeThr{
    img{
        width: 88px;
        height: 88px;
    }
    .detail{
        background-color: #fff;
        .d_top{
            text-align: center;
            padding-top: 10px;
            margin-bottom: 40px;
            span{
                display: block;
                font-size: 20px;
                font-weight: 400;
            }
            p{
                display: block;
                margin: 15px 0;
                
            }
        }
        ul{
            li{
                display: flex;
                padding-bottom: 10px;
                margin: 10px 20px;
                .price{
                    display: flex;
                    margin-top: 20px;
                    p{
                        height: 10px;
                        line-height: 10px;
                    }
                    .dl{
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}
</style>